<template>
	<Nav class="f" bgColor="#020121">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<!-- <image src="/static/icon/left.png" mode="aspectFill"></image> -->
				<!-- <u-icon name="arrow-left" color="#fff" size="34"></u-icon> -->
			</view>
			<view class="r-name">我的</view>
		</view>
	</Nav>
	<view :style="{ marginTop: navHeiht + 'px' }">
		<view class="bg" :style="{ marginTop: navHeiht + 'px' }"></view>
		<view class="content p-32">
			<view class="user common dispaly-just-between" @click="$goUrl('/subPackage/mine/userInfo')">
				<view class="user-left dispaly-center">
					<view class="avatar">
						<image
							src="https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6"
							mode="aspectFill"
						></image>
					</view>
					<view class="user-info">
						<view class="name">张文欣</view>
						<view class="info dispaly-center">
							<view class="height">175cm</view>
							<view class="line"></view>
							<view class="width">58kg</view>
						</view>
					</view>
				</view>
				<view class="user-right">
					<u-icon name="arrow-right" color="#7b7b88" size="28"></u-icon>
				</view>
			</view>
			<view class="option common">
				<view class="op-item dispaly-just-between" v-for="(item, index) in USER_OPTION_LIST" :key="index" @click="clickOption(item)">
					<view class="op-left dispaly">
						<view class="icon">
							<image :src="item.icon" mode="aspectFill"></image>
						</view>
						<view class="op-name">{{ item.name }}</view>
					</view>
					<view class="op-right">
						<u-icon name="arrow-right" color="#7b7b88" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getElementHeight } from '@/utils/util';
import { USER_OPTION_LIST } from '@/config/base.js';

const clickOption = (item) => {
	if (item.path) {
		uni.navigateTo({
			url: item.path
		});
	}
};

// 获取元素高度
const navHeiht = ref(0);
onMounted(async () => {
	const res = await getElementHeight('.f');
	navHeiht.value = res;
});
</script>

<style lang="scss" scoped>
.home-content {
	margin: 0 32rpx;
}

.tag {
	margin-right: 10rpx;
}

.r-name {
	color: #fff;
}

.common {
	padding: 32rpx;
	background: #ffffff;
	border-radius: 20rpx;
}

.title {
	.icon {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.bg {
	background: linear-gradient(180deg, #020121 0%, rgba(2, 1, 33, 0) 100%);
	height: 378rpx;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.content {
	.user {
		.user-left {
			.avatar {
				margin-right: 16rpx;
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}
			.user-info {
				.name {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 36rpx;
					color: #020121;
					margin-bottom: 10rpx;
				}
				.info {
					margin-top: 10rpx;
					.height,
					.width {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #7b7b89;
					}
					.line {
						margin: 0 20rpx;
						width: 2rpx;
						height: 24rpx;
						background: #d8d8d8;
					}
				}
			}
		}
	}
	.option {
		margin-top: 16rpx;
		.op-item {
			padding: 32rpx 0;
			border-bottom: 1rpx solid #f5f5f5;
			.op-left {
				.icon {
					margin-right: 16rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
				.name {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #020121;
				}
			}
		}
	}
}
</style>
